<style>
    div[lay-id='storageInventoryAlarmTable']{
        display: none;
    }
    div[lay-id='storageInventoryAlarmTable'] .layui-table-tool{
        position: initial;
        text-align: right;
        width: 100%;
    }
    .inventory-alarm-list{
        display: inline-flex;
        width: 100%;
        flex-wrap: wrap;
    }
    .inventory-alarm-list .list-cell{
        width: 25%;
        padding: 8px;
        box-sizing: border-box;
    }
    .inventory-alarm-list .list-cell .list-item{
        border-radius: 5px;
        border: 1px solid #ECECEC;
    }
    .inventory-alarm-list .list-cell .list-top{
        height: 40px;
        padding: 0 15px;
        background: rgba(0,156,94,0.06);
        border-radius: 5px 5px 0 0;
    }
    .inventory-alarm-list .list-cell .list-top .sku-name{
        font-weight: 600;
    }
    .inventory-alarm-list .list-cell .list-top .space{
        padding-left: 10px;
        flex: 1;
        text-align: left;
    }
    .inventory-alarm-list .list-ct{
        display: flex;
        padding: 15px 15px 5px;
    }
    .inventory-alarm-list .list-ct .list-icon{
        width: 80px;
        height: 80px;
        flex-shrink: 0;
    }
    .inventory-alarm-list .list-ct .list-icon img{
        width: 100%;
        height: 100%;
        border-radius: 5px;
    }
    .inventory-alarm-list .list-ct .list-txt{
        padding-left: 14px;
        flex: 1;
    }
    .inventory-alarm-list .list-ct .list-txt .sku-code{
        font-weight: 600;
        line-height: 18px;
        margin-bottom: 2px;
    }
    .inventory-alarm-list .list-ct .list-txt .label{
        padding-top: 2px;
        line-height: 18px;
    }
    .inventory-alarm-list .list-btm{
        padding: 0 15px;
    }
    .inventory-alarm-list .list-btm .nape-cell {
        line-height: 18px;
        padding-top: 10px;
    }
    .inventory-alarm-list .list-btn{
        padding: 15px 8px;
    }
    .inventory-alarm-list .list-btn .btn-cell{
        padding: 0 7px;
        flex: 1;
    }
    .inventory-alarm-list .list-btn .btn-cell .layui-btn{
        width: 100%;
        height: 40px;
        line-height: 40px;
    }
    .inventory-alarm-list .list-btn .btn-cell .layui-btn.details{
        background-color: #FFFFFF !important;
        color: #333;
        border: 1px solid #009C5E;
    }
    .inventory-alarm-list .row-between{
        justify-content: space-between;
    }
    .inventory-alarm-list .flex-ct{
        display: flex;
        align-items: center;
    }
    .inventory-alarm-list .label{
        color: #999;
    }
    .inventory-alarm-list .line-1{
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        /*! autoprefixer: ignore next */
        -webkit-box-orient: vertical;
        word-wrap: break-word;
        word-break: break-all;
    }
    .inventory-alarm-list .list-cell .list-top .space-cion{
        width: 52px;
        height: 32px;
        line-height: 32px;
        color: #FFFFFF;
        padding-left: 15px;
        font-weight: 600;
        background-image: url(assets/images/cabinet/space-icon.png);
        background-size: 100% 100%;
        flex-shrink: 0;
    }
</style>
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <!-- 头部操作栏 -->
            <div class="layui-form lay-header">
                <div class="toolbar">
                    <div class="layui-form-item lay-query-content">
                        <div class="lay-query-box">
                            <div class="query-lt" style="width: 56%;">
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">主柜编号：</label>
                                    <div class="layui-input-inline">
                                        <select name="cabCode" lay-filter="cabCode" lay-search lay-verify="" class="common-select-search">
                                            <option value="">请选主柜</option>
                                        </select>
                                    </div>
                                </div>
                                <!--                                <div class="layui-inline">-->
                                <!--                                    <label class="layui-form-label w-auto">货道编号：</label>-->
                                <!--                                    <div class="layui-input-inline">-->
                                <!--                                        <input name="spaceCode" class="layui-input" type="text" placeholder="请输入货道编号"/>-->
                                <!--                                    </div>-->
                                <!--                                </div>-->
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">物料编号：</label>
                                    <div class="layui-input-inline">
                                        <input name="skuCode" class="layui-input" type="text" placeholder="请输入物料编号" autocomplete="off"/>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">规格码：</label>
                                    <div class="layui-input-inline">
                                        <input name="oldSpecCode" class="layui-input" type="text"
                                               placeholder="请输入规格码" autocomplete="off"/>
                                    </div>
                                </div>
                                <!--<div class="layui-inline">
                                    <label class="layui-form-label w-auto">刀柜类型：</label>
                                    <div class="layui-input-inline">
                                        <select name="cabinetNature" >
                                            <option value="">请选择刀柜类型</option>
                                            <option value="sale">售刀柜</option>
                                            <option value="live">存刀柜</option>
                                        </select>
                                    </div>
                                </div>-->
                            </div>
                            <div class="query-rt">
                                <div class="layui-inline">
                                    <div class="viewNav" id="viewNav">
                                        <div class="viewNavGraphics active"><img src="assets/images/navgraphics1.png">图文</div>
                                        <div class="viewNavList"><img src="assets/images/navlist.png">列表</div>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <button class="layui-btn icon-btn color-green" lay-filter="formSubSearchLog"
                                            lay-submit layui-form-keyDownSearch="true">查询
                                    </button>
                                    <button class="layui-btn icon-btn color-white" lay-filter="resets" lay-submit>重置
                                    </button>
                                    <button id="cellInventoryAlarmExport" class="layui-btn icon-btn"><i class="layui-icon">&#xe67d;</i>导出</button>
                                    <!--
                                    <button id="cellInventoryCabinetExport" class="layui-btn icon-btn"><i class="layui-icon">&#xe67d;</i>导出</button>
                                    -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 表格 -->
            <table class="layui-table" id="storageInventoryAlarmTable" lay-filter="storageInventoryAlarmTable"></table>
            <div class="viewNavMain" id="viewNavMain">
                <div class="viewNavBox" style="">
                    <div class="inventory-alarm-list" id="viewNavBox"></div>
                    <div class="list-none-data" style="display: none">
                        <img src="assets/images/none-data.png" alt="">
                        <p>暂无数据</p>
                    </div>
                </div>
                <div id="viewNavPage" style="text-align: right;"></div>
            </div>
        </div>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="storageInventoryAlarmTableBar">
    <a class="layui-btn layui-btn-xs" lay-event="storageInventoryBtn">库存分布</a>
</script>

<!--图文模板-->
<script type="text/html" id="alarmProductImgTemplate">
    {{# layui.each(d, function(index, item){ }}
    <div class="list-cell">
        <div class="list-item">
            <div class="list-top flex-ct">
<!--                <div class="space-cion">-->
<!--                    <span>{{item.spaceCode}}</span>-->
<!--                </div>-->
                <div class="sku-name line-1">主柜编号：{{item.belongCabinet}}</div>
            </div>
            <div class="list-ct">
                <div class="list-icon">
                    <img src="{{item.skuPic ? item.skuPic : 'assets/images/default-icon.png'}}" alt="">
                </div>
                <div class="list-txt">
                    <div class="sku-code line-1">{{item.skuName}}</div>
                    <div class="label line-1">编码：{{item.skuCode}}</div>
                    <div class="label line-1">规格：{{item.skuSpecOld}}</div>
                    <div class="label">品牌：{{item.productBrandName}}</div>
                </div>
            </div>
            <div class="list-btm">
                <!--<div class="nape-cell flex-ct row-between">
                    <div class="nape-item"><label class="label">柜子编号：</label><span>{{item.cabCode}}</span></div>
                    <div class="nape-item"><label class="label">柜子类型：</label><span>{{item.cabinetNature==1?'售刀柜':'存刀柜'}}</span></div>
                </div>-->
                <div class="nape-cell flex-ct row-between">
                    <!--<div class="nape-item"><label class="label">刀柜名称：</label><span>{{item.cabName}}</span></div>-->
                    <div class="nape-item"><label class="label">告警设置库存：</label><span>{{item.quantitySetting}}</span></div>
                    <div class="nape-item"><label class="label">缺货数量：</label><span>{{item.quantitySetting - item.quantity}}{{item.basicsUnitName}}</span></div>
                </div>
                <div class="nape-cell flex-ct row-between">
                    <div class="nape-item"><label class="label">库存(基础单位计)：</label><span>{{item.quantity}}{{item.basicsUnitName}}</span></div>
                    <!--<div class="nape-item"><label class="label">缺货数量：</label><span>{{item.quantitySetting - item.quantity}}{{item.basicsUnitName}}</span></div>-->
                </div>
                <div class="nape-cell flex-ct row-between">
                    <div class="nape-item"><label class="label">总库存(包装计)：</label><span>{{item.totalInventory}}{{item.unitName}}</span></div>
                    <div class="nape-item"><label class="label">总库存(基础单位计)：</label><span>{{item.totalInventoryPack}}{{item.basicsUnitName}}</span></div>
                </div>
            </div>
            <div class="list-btn flex-ct">
                <div class="btn-cell">
                    <button class="layui-btn inventorySpace" data-code="{{item.skuCode}}" data-cab="{{item.belongCabinet}}">库存分布</button>
                </div>
            </div>
        </div>
    </div>
    {{# }); }}
</script>

<!-- 表单弹窗 -->
<script type="text/html" id="storageInventoryInoutForm">
    <div class="layui-fluid" style="padding: 0 20px;">
        <table class="layui-table" id="inventoryProductTable" lay-filter="inventoryProductTable"></table>
    </div>
</script>

<script type="text/html" id="inventorySpecForm">
    <div class="layui-fluid" style="padding: 0 20px;">
        <table class="layui-table" id="inventorySpecTable" lay-filter="inventorySpecTable"></table>
    </div>
</script>

<script type="text/html" id="inventoryProductTableBar">
    <a class="layui-btn layui-btn-xs" lay-event="inventorySpecBtn">库存分布</a>
</script>

<!-- js部分 -->
<script>
    layui.use(['layer', 'form', 'table', 'admin', 'laypage', 'laytpl'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var config = layui.config;
        var admin = layui.admin;
        var upload = layui.upload;
        var laytpl = layui.laytpl;
        let laypage = layui.laypage;
        let viewNavPageCount = 0, listText = 1; //viewNavPageCount(图文状态下的页码)  listText(区分图文视图1 和 列表视图0)
        let inventoryAlarmList = [];

        admin.selectSearch();

        // 渲染表格
        var insTb = table.render({
            elem: '#storageInventoryAlarmTable',
            url: config.base + 'enterprisecab/cabinet/admin/cellInventoryAlarm/list',
            toolbar: true,
            defaultToolbar: ["filter"],
            page: true,
            cellMinWidth: 100,
            cols: [[
                {type: 'numbers', title: '序号', fixed: 'left'}
                , {field: 'skuName', sort: false, title: '物料名称', fixed: 'left', width: 160}
                , {field: 'skuCode', sort: true, title: '物料编号', fixed: 'left', width: 160}
                , {field: 'skuSpecOld', sort: false, title: '规格码', fixed: 'left', width: 160, templet: function (d) {
                        return d.skuSpecOld ? d.skuSpecOld : "无"
                    }}
                , {field: 'productBrandName', sort: false, title: '品牌'}
                , {field: 'belongCabinet', sort: false, title: '主柜编码'}
                , {field: 'cabName', sort: false, title: '刀柜名称'}
                , {field: 'cabinetNature', sort: false, title: '刀柜类型',templet: (d)=> {
                        if(d.cabinetNature==1){
                            return '售刀柜'
                        }else{
                            return '存刀柜'
                        }
                    }}
                , {field: 'cabCode', sort: false, title: '刀柜编码'}
                , {field: 'spaceCode', sort: false, title: '货道/货位编号'}
                , {field: 'spaceCode', sort: false, title: '货道/货位编号'}
                ,{field: 'quantityPack', sort: true, title: '库存(包装计)', width: 150}
                , {field: 'unitName', sort: false, title: '包装单位', templet:  d=> d.packUnitName ? d.packUnitName : '无'}
                ,{field: 'quantity', sort: true, title: '库存(基础单位计)', width: 150}
                , {field: 'basicsUnitName', sort: true, title: '基础单位', templet: d=> d.basicsUnitName ? d.basicsUnitName : '无'}
                , {field: 'quantitySetting', sort: false, title: '告警设置库存', width: 130}
                , {field: 'quantitySetting', sort: false, title: '缺货数量', templet: (d)=> {
                    return (Number(d.quantitySetting) - Number(d.quantity)) + d.basicsUnitName
                }}
                , {align: 'center', toolbar: '#storageInventoryAlarmTableBar', title: '操作', width: 100, fixed: 'right'}
            ]],
            done: function (res, curr, count) {
            }
        });

        // 工具条点击事件
        table.on('tool(storageInventoryAlarmTable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'storageInventoryBtn') { //修改
                showStorageInventoryModel(data);
            }
        });

        $('#mergeOrder').click(function () {
            let checkRows = table.checkStatus('storageInventoryInoutTable');
            let replenishmentOrderFormList = [];
            if (checkRows.data.length === 0) {
                layer.msg('请选择要合并的数据', {icon: '5'});
                return false;
            }
            checkRows.data.forEach(item => {
                item.inventoryAlarmId = item.id;
                replenishmentOrderFormList.push(item)
            });

            admin.req('enterprise/purchase/admin/replenishmentOrder/submitReplenishmentOrder', JSON.stringify(replenishmentOrderFormList), res => {
                if (res.code === 200) {
                    table.reload('storageInventoryInoutTable');
                    layer.msg(res.msg, {icon: 1});
                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            }, 'POST', 'true', 'application/json; charset=utf-8')
        });

        //监听排序
        table.on('sort(storageInventoryAlarmTable)', function (obj) {
            table.reload('storageInventoryAlarmTable', {
                initSort: obj
                , where: {
                    sort: obj.field
                    , order: obj.type
                }
            });
            $('[lay-id="storageInventoryAlarmTable"]').show();
        });
        $('#viewNav .viewNavGraphics ').click(function () {
            listText = 1;
            $(this).addClass('active').siblings().removeClass('active');
            $(this).find('img').attr('src', 'assets/images/navgraphics1.png');
            $(this).siblings('div').eq(0).find('img').attr('src', 'assets/images/navlist.png');
            $('[lay-id="storageInventoryAlarmTable"]').hide();
            $('#viewNavMain').show();
        });

        $('#viewNav .viewNavList ').click(function () {
            listText = 0;
            $('[lay-id="storageInventoryAlarmTable"]').show();
            // 显示表格需重绘表格尺寸
            table.resize("storageInventoryAlarmTable");
            $('#viewNavMain').hide();
            $(this).addClass('active').siblings().removeClass('active');
            $(this).find('img').attr('src', 'assets/images/navlist1.png');
            $(this).siblings('div').eq(0).find('img').attr('src', 'assets/images/navgraphics.png');
        });


        function viewNavBox(data) {
            layer.load(2);
            if (!data || data.length <= 0) {
                $('#viewNavBox').html('');
                $('#viewNavPage').hide();
                $('.list-none-data').show();
            } else {
                $('.list-none-data').hide();
                laytpl(alarmProductImgTemplate.innerHTML).render(data, function (html) {
                    $('#viewNavBox').html(html);
                });
                $('#viewNavPage').show();
            }
            layer.closeAll();
        }

        $('#viewNavBox').delegate('.inventorySpace', 'click', function () {
            let code = $(this).attr('data-code') + $(this).attr('data-cab');
            let filterList = inventoryAlarmList.filter(item => {
                let flag = item.skuCode + item.belongCabinet
                return code == flag
            })
            showStorageInventoryModel(filterList[0])
        });

        admin.reqSync('enterprisecab/cabinet/admin/cellInventoryAlarm/list', {page: 1, limit: 12}, res => {
            if (res.code === 200) {
                viewNavPageCount = res.count;
                inventoryAlarmList = res.data;
                viewNavBox(res.data);
                viewNavPageFn()
            }
        }, 'get');

        function viewNavPageFn(_condition) {
            laypage.render({
                elem: 'viewNavPage' //注意，这里的 test1 是 ID，不用加 # 号
                , count: viewNavPageCount //数据总数，从服务端得到
                , limit: 12
                , jump: function (obj, first) {
                    if (!first) {
                        let condition = _condition ? $.extend(_condition, {
                            page: obj.curr,
                            limit: obj.limit
                        }) : {page: obj.curr, limit: obj.limit};
                        admin.req('enterprisecab/cabinet/admin/cellInventoryAlarm/list', condition, res => {
                            if (res.code === 200) {
                                inventoryAlarmList = res.data;
                                viewNavBox(res.data);
                            }
                        }, 'get');
                    }
                }
            });
        }

        // 搜索
        form.on('submit(formSubSearchLog)', function (data) {
            if (listText == 0) {
                insTb.reload({where: data.field, page: {curr: 1}}, 'data');
                $('[lay-id="storageInventoryAlarmTable"]').show();
            } else {
                admin.reqSync('enterprisecab/cabinet/admin/cellInventoryAlarm/list', $.extend(data.field, {
                    page: 1,
                    limit: 12
                }), res => {
                    if (res.code === 200) {
                        inventoryAlarmList = res.data;
                        viewNavPageCount = res.count;
                        viewNavBox(res.data);
                        viewNavPageFn(data.field)
                    }
                }, 'get');
            }
        });

        // 重置搜索
        form.on('submit(resets)', function (data) {
            $(".lay-header").find('select').val("");
            $(".lay-header").find('input').val("");
            var field = data.field;
            for (let key in field) {
                field[key] = ''
            }
            if (listText == 0) {
                insTb.reload({where: field, page: {curr: 1}}, 'data');
                $('[lay-id="storageInventoryAlarmTable"]').show();
            } else {
                admin.reqSync('enterprisecab/cabinet/admin/cellInventoryAlarm/list', {page: 1, limit: 12}, res => {
                    if (res.code === 200) {
                        viewNavPageCount = res.count;
                        inventoryAlarmList = res.data;
                        viewNavBox(res.data);
                        viewNavPageFn(field)
                    }
                }, 'get');
            }
        });

        admin.req('enterprisecab/cabinet/admin/cabinet/list', {
            limit: 999,
            cabinetNature: 'main',
            cabinetType: 'spring'
        }, function (res) {
            if (200 == res.code) {
                var optionHtml = '<option value=""> 请选择柜子</option>';
                for (var k = 0; k < res.data.length; k++) {
                    optionHtml += '<option value="' + res.data[k].cabCode + '">' + res.data[k].cabCode + '</option>';
                }
                $("select[name='cabCode']").html(optionHtml);
                form.render('select')
            } else {
                layer.msg(res.msg, {icon: 2, time: 1000});
            }
        }, 'GET');

        form.render('select');

        // 显示库存分布弹窗
        function showStorageInventoryModel(data) {
            admin.open({
                type: 1,
                area: '1270px',
                offset: '65px',
                title: '库存缺货告警详情',
                content: $('#storageInventoryInoutForm').html(),
                success: function () {
                    getInventoryProduct(data);
                }
            });
        }

        var cabinetNatureType = '';
        function getInventoryProduct(data) {
            cabinetNatureType=data.cabinetNature;
            //var url = cabinetNatureType==1?"enterprisecab/cabinet/admin/cellInventoryCabinet/getListInventoryBySkuCode?skuCode=":"enterprisecab/cabinet/admin/storageSingleInventoryCabinet/getInventoryBySkuCodeAndBelongCabinet?skuCode="
            var inventoryProductTb = table.render({
                elem: '#inventoryProductTable',
                //url: config.base + url + data.skuCode + '&belongCabinet=' + data.belongCabinet,
                url: config.base + 'enterprisecab/cabinet/admin/storageSingleInventoryCabinet/getAllInventoryBySkuCodeAndBelongCabinet',
                page: false,
                where:{ skuCode: data.skuCode, belongCabinet: data.belongCabinet},
                cellMinWidth: 100,
                cols: [[
                    {type: 'numbers', title: '序号', fixed: 'left'}
                    , {field: 'productName', sort: false, title: '物料名称', fixed: 'left', width: 160}
                    , {field: 'skuCode', sort: false, title: '物料编号', fixed: 'left', width: 160}
                    , {field: 'skuSpecOld', sort: false, title: '规格码', fixed: 'left', width: 160}
                    , {field: 'productBrandName', sort: false, title: '品牌'}
                    , {field: 'cabCode', sort: false, title: '柜子编号'}
                    , {field: 'cabName', title: '柜子名称'}
                    , {field: 'quantityPack', sort: true, title: '库存(基础单位计)', width: 150, templet: d => d.quantityPack + d.basicsUnitName }
                    , {field: 'quantitySetting', sort: false, title: '告警设置库存', width: 120}
                    , {align: 'center', toolbar: '#inventoryProductTableBar', title: '操作', width: 100}
                ]]
            });
        }

        // 工具条点击事件
        table.on('tool(inventoryProductTable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'inventorySpecBtn') { //修改
                showInventorySpecModel(data);
            }
        });

        function showInventorySpecModel(data) {
            admin.open({
                type: 1,
                area: '1280px',
                offset: '65px',
                title: '库存分布',
                content: $('#inventorySpecForm').html(),
                success: function () {
                    getInventorySpec(data);
                }
            });
        }

        function getInventorySpec(data) {
            // cabinet/admin/storageInventorySpace/listAll
            // cabinet/admin/storageInventorySpace/list
            var urlType = data.cabinetNature == 'sale'?"enterprisecab/cabinet/admin/cellInventorySpace/list?cabCode=":"enterprisecab/cabinet/admin/storageInventorySpace/listAll?cabCode=";
            var inventoryProductTb = table.render({
                elem: '#inventorySpecTable',
                url: config.base + urlType + data.cabCode + '&skuCode=' + data.skuCode,
                page: true,
                cellMinWidth: 100,
                cols: [[
                    {type: 'numbers', title: '序号', fixed: 'left'}
                    , {field: 'skuName', title: '物料名称', fixed: 'left', width: 160}
                    , {field: 'skuCode', title: '物料编号', fixed: 'left', width: 160}
                    , {field: 'skuSpecOld', title: '规格码', fixed: 'left', width: 160}
                    , {field: 'productBrandName', title: '品牌'}
                    , {field: 'spaceCode', title: '货道编号'}
                    , {field: 'cabCode', title: '柜子编号'}
                    , {field: 'cabName', title: '柜子名称'}
                    , {field: 'quantityPack', sort: true, title: '库存(基础单位计)', width: 150, templet: d => d.quantityPack + d.basicsUnitName }
                    , {field: 'quantityMax', title: '货道容量'}
                ]],
            });
        }

        // 导出
        $('#cellInventoryAlarmExport').click(function () {
            location.href = config.base + 'enterprisecab/cabinet/admin/cellInventoryAlarm/export?enterpriseCode=' + config.getUser().enterpriseCode;
        });

    });
</script>